<script setup lang="ts">

import {defineProps, ref, onMounted, computed} from "vue";

const {size, text} = defineProps({
  "size": {
    type: Number,
    default: 128
  },
  "text": {
    type: String,
  }
})


const funcRandomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
onMounted(() => {
  randomNum.value = funcRandomNum(0, 4);
})
const randomNum = ref(0);

const src = computed(() => {
  return `${import.meta.env.BASE_URL}nodata/nodata_${randomNum.value}.png`
})
</script>

<template>
  <div style="display: flex;flex-direction: column;align-items: center">
    <el-image :style="{
      width:`${size}px`,
      height:`${size}px`
    }"
              :src="src"/>
    <slot name="default">
      <el-text>{{ text }}</el-text>
    </slot>
  </div>
</template>

<style scoped>

</style>